<template>
  <el-dialog
    append-to-body
    v-if="visibleAble"
    :title="title"
    :width="width"
    :top="top + 'vh'"
    :modal="showModal"
    :visible.sync="visibleAble"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="close">
      <el-form  ref="dataForm" :model="employeeInfo" label-width="120px" :rules="rules">
        <el-row>
          <el-col :span="12">
              <el-form-item  label="姓名" prop="employeeName">
                <el-input  class="wp-form-280" clearable v-model="employeeInfo.employeeName" placeholder="员工姓名"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  prop="loginAccount">
              <template slot="label">
                  <span>登录账号</span>
                <el-tooltip content="登录系统账号，密码默认初始值：【abc123】" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </template>
              <el-input :disabled="!isCreate"  class="wp-form-280" clearable v-model="employeeInfo.loginAccount" placeholder="登录账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
              <el-form-item  label="手机号" prop="mobile">
                <el-input  class="wp-form-280" maxlength="11" clearable v-model="employeeInfo.mobile" placeholder="手机号"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="邮箱" prop="email">
                <el-input  class="wp-form-280" clearable v-model="employeeInfo.email" placeholder="邮箱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="12">
              <el-form-item  label="员工类型" prop="employeeType">
                <el-select class="wp-form-280" v-model="employeeInfo.employeeType" placeholder="选择员工类型">
                  <el-option v-for="item in employeeTypeList" :key="item.value" :value="item.value" :label="item.lable">
                  </el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="入职日期" prop="entryDate">
                <el-date-picker
                style="width:280px"
                v-model="employeeInfo.entryDate"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
              <el-form-item  label="直属部门" prop="mainDepartment">
                <Select-Depart
                  clearable v-model="employeeInfo.mainDepartment"></Select-Depart>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="直属上级" prop="superiorCode">
                <Employee-seach :employeeCode.sync="employeeInfo.superiorCode" :employeeName.sync="employeeInfo.superiorName"/>
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
            <el-form-item label="职位" prop="positionInfoList">
                <Select-position  v-model="employeeInfo.positionInfoList" :resultObject.sync="positionInfoList" returnObject reslutIsObject clearable multiple></Select-position>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-select class="wp-form-280"  v-model="employeeInfo.gender"  placeholder="请选择">
              <el-option  v-for="item in employeeGenderList" :key="item.value"  :value="item.value" :label="item.lable"></el-option>
            </el-select>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-if="positionInfoList && positionInfoList.length>0">
             <el-form-item label="主职位">
                <el-select class="wp-form-280" v-model="mainPositionCode" placeholder="请选择">
                  <el-option v-for="(item,index) in positionInfoList" :key="index" :label="item.positionName" :value="item.positionCode"></el-option>
                </el-select>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
                <el-input
                type="textarea"
                class="wp-form-280"
                rows="2"
                v-model="employeeInfo.remark"
                placeholder="备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <div slot="footer" class="wp-footer__box">
      <el-button @click.native="close">取消</el-button>
      <el-button type="success" @click.native="save('dataForm')">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import EmployeeSeach from '@/views/components/EmployeeSeach'
import SelectDepart from '@/views/system/components/department/select'
import SelectPosition from '@/views/system/components/position/select'
import employee from '@/api/system/employeeAPI'
export default {
  props: {
    visible: Boolean,
    height: {
      type: Number,
      default: 360
    },
    isCreate: {type: Boolean, default: true},
    title: {type: String, default: '新建员工'},
    top: {type: [Number], default: 2},
    width: {type: [String, Number], default: '80%'},
    showModal: {type: Boolean, default: true},
    defaultDepartment: String,
    data: Object

  },
  components: {EmployeeSeach, SelectDepart, SelectPosition},
  watch: {
    visible: {
      handler (val) {
        this.visibleAble = val
      },
      immediate: true
    },
    visibleAble (val) {
      this.$emit('update:visible', val)
    },
    data: {
      handler (val) {
        if (val && Object.keys(val).length > 0) {
          this.employeeInfo = {...val}
          this.positionInfoList = val.positionInfoList || []
        }
      },
      deep: true,
      immediate: true
    },
    positionInfoList: {
      handler (val) {
        if (val && val.length > 0) {
          const mainPosition = val.find(v => {
            return v.mainPosition === 1
          })
          if (mainPosition) {
            this.mainPositionCode = mainPosition.positionCode
          } else {
            this.mainPositionCode = val[0].positionCode
          }
        } else {
          this.mainPositionCode = ''
        }
      },
      deep: true,
      immediate: true
    },
    defaultDepartment: {
      handler (val) {
        if (val) {
          this.employeeInfo.mainDepartment = val
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      visibleAble: false,
      employeeInfo: {},
      positionInfoList: [],
      mainPositionCode: '',
      employeeTypeList: [{value: 1, lable: '正式员工'}, {value: 0, lable: '实习员工'}],
      employeeGenderList: [{value: 1, lable: '男'}, {value: 0, lable: '女'}],
      rules: {
        employeeName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        customerCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
        loginAccount: [{ required: true, message: '不能为空', trigger: 'blur' }],
        mobile: [{ required: true, message: '不能为空', trigger: 'blur' }],
        employeeType: [{ required: true, message: '不能为空', trigger: 'blur' }],
        entryDate: [{ required: true, message: '不能为空', trigger: 'blur' }],
        mainDepartment: [{ required: true, message: '不能为空', trigger: 'blur' }],
        positionInfoList: [{ required: true, message: '不能为空', trigger: 'blur' }],
        gender: [{ required: true, message: '不能为空', trigger: 'blur' }],
        mainPositionCode: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }

    }
  },
  methods: {
    close () {
      this.visibleAble = false
    },
    save (form) {
      this.$refs[form].validate(validate => {
        if (this.mainPositionCode && this.employeeInfo.positionInfoList && this.employeeInfo.positionInfoList.length > 0) {
          this.employeeInfo.positionInfoList = this.employeeInfo.positionInfoList.map(v => {
            if (v.positionCode === this.mainPositionCode) {
              v.mainPosition = 1
            } else {
              v.mainPosition = 0
            }
            return v
          })
        }
        if (validate) {
          if (this.isCreate) {
            // 新增
            employee.addEmployeeAPI(this.employeeInfo).then(res => {
              if (res.code === 0) {
                this.close()
                this.$emit('afterSave', res)
              }
            })
          } else {
            // 修改
            if (!this.employeeInfo.employeeCode) {
              this.$msgBox.error('员工编号为空')
              return
            }
            employee.updateEmployeeAPI(this.employeeInfo).then(res => {
              if (res.code === 0) {
                this.close()
                this.$emit('afterSave', res)
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
